import React, { Component } from 'react';
import { Button, Icon, Card, message } from 'antd';
import { connect } from 'dva';
import { routerRedux, Link } from 'dva/router';

import Result from '../../components/Result';
import styles from './RegisterResult.less';

@connect(state => ({
  register: state.register,
}))
export default class RegisterResult extends Component {
  componentDidMount() {
    if (!this.props.register.status) {
      this.props.dispatch(routerRedux.push('/user/register'));
    }
  }

  handleRegisterErr = (e) => {
    message.error(`注册失败：${e}`);
    this.props.dispatch(routerRedux.push('/user/register'));
  }

  render() {
    const register = { ...this.props.register };
    const currentUser = register.user && register.user.currentUser;
    if (!currentUser) {
      return (
        <div> not allowed to visit</div>
      );
    }

    if (currentUser.err) {
      const extra = (
        <div style={{ marginBottom: 16 }}>
          <Icon style={{ color: '#f5222d', marginRight: 8 }} type="close-circle-o" />{currentUser.err.message}
        </div>
      );

      const actions = <Button type="primary" onClick={this.handleRegisterErr}>返回修改</Button>;

      return (
        <Card bordered={false}>
          <Result
            type="error"
            title="注册失败"
            extra={extra}
            actions={actions}
            style={{ marginTop: 48, marginBottom: 16 }}
          />
        </Card>
      );
    }

    const title = <div className={styles.title}>你的账户：{currentUser.user_name} 注册成功</div>;
    const actions = (
      <div className={styles.actions}>
        <Button size="large" type="primary">
          <a href="">查看邮箱</a>
        </Button>
        <Button size="large">
          <Link to="/">返回首页</Link>
        </Button>
      </div>
    );

    return (
      <Result
        className={styles.registerResult}
        type="success"
        title={title}
        description="激活邮件已发送到你的邮箱中，邮件有效期为24小时。请及时登录邮箱，点击邮件中的链接激活帐户。"
        actions={actions}
        style={{ marginTop: 56 }}
      />
    );
  }
}
